<div class="yl10-content">
  <div
    class="primeng-datatable-container"
    [busyIf]="primengTableHelper.isLoading"
  >
    <div class="mb-4">
      <h5 class="mb-4"><i class="fa fa-list"></i> 出库信息</h5>
      <p-table
        #dataTable
        [value]="outs"
        rows="10"
        [paginator]="false"
        [scrollable]="true"
        ScrollWidth="100%"
        dataKey="id"
        [responsive]="primengTableHelper.isResponsive"
        [expandedRowKeys]="expandedRowKeys"
        [resizableColumns]="primengTableHelper.resizableColumns"
      >
        <ng-template pTemplate="caption">
          <div class="row align-items-center m--margin-bottom-10">
            <div class="col-xl-4" style="text-align: left">
              <p-multiSelect
                [options]="cols"
                [(ngModel)]="selectedColumns"
                optionLabel="header"
                selectedItemsLabel="已选择 {0} 列"
                [style]="{ padding: 0 }"
                defaultLabel="Choose Columns"
              ></p-multiSelect>
            </div>
          </div>
        </ng-template>
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 25px"></th>
            <th width="60px">操作</th>
            <th width="80px">可退数量</th>
            <th width="80px">出库数量</th>
            <th width="150px">出库位置</th>
            <th *ngFor="let col of selectedColumns" width="{{col.width}}">{{ col.header }}</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record let-expanded="expanded">
          <tr>
            <td style="width: 25px">
              <a href="javascript:;" [pRowToggler]="record">
                <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
              </a>
            </td>
            <th width="60px">
              <button
                type="button"
                class="btn btn-success btn-sm"
                (click)="
                  yl10ChildModal.show(
                    record.pipelineId,
                    record.id,
                    record.materialChargeId,
                    record.canReturnQuantity
                  )
                "
              >
                退库
              </button>
            </th>
            <th width="80px">{{ record.canReturnQuantity }}</th>
            <th width="80px">{{ record.quantity }}</th>
            <th width="150px">{{ record.locationName }}</th>
            <td *ngFor="let col of selectedColumns" width="{{col.width}}">{{ record[col.field] }}</td>
          </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-record>
          <tr>
            <td [attr.colspan]="selectedColumns.length + 5">
              <p-table [value]="record.materialReturns">
                <ng-template pTemplate="header">
                  <tr>
                    <th width="80px">退库数量</th>
                    <th width="200px">退库位置</th>
                    <th width="200px">退库备注</th>
                    <th>操作</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                  <tr>
                    <td width="80px">{{ rowData.quantity }}</td>
                    <td width="200px">{{ rowData.locationName }}</td>
                    <td width="200px">{{ rowData.remark }}</td>
                    <td>
                      <button type="button" class="btn btn-success btn-sm" (click)="getClean(rowData.id)">撤销</button>
                    </td>
                  </tr>
                </ng-template>
              </p-table>
            </td>
          </tr>
        </ng-template>
      </p-table>
      <!-- <h5 class="mb-4" style="margin-top: 20px">
        <i class="fa fa-list"></i> 退库信息
      </h5>
      <p-table [value]="returns" [scrollable]="true" ScrollWidth="100%">
        <ng-template pTemplate="header">
          <tr>
            <th width="80px">退库数量</th>
            <th width="200px">退库位置</th>
            <th *ngFor="let col of selectedColumns" width="{{ col.width }}">
              {{ col.header }}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
          <tr *ngFor="let item of rowData">
            <td width="80px">
              {{ item.materialForProduct.itemAmount }}
            </td>
            <td width="200px">
              {{ item.locationOfMaterial.displayName }}
            </td>
            <td *ngFor="let col of selectedColumns" width="{{ col.width }}">
              {{ item.materialForProduct[col.field] }}
            </td>
          </tr>
        </ng-template>
      </p-table> -->
    </div>
  </div>
  <yl10ChildModal #yl10ChildModal (modalSave)="reloadPage()"></yl10ChildModal>
</div>
